<#include "layout/template.ftl"/>

<@htmlHead title="新增">
   	<link rel="stylesheet" href="${resources}/css/fileupload.css" />
   	<link  rel="stylesheet" href="${resources}/css/upload.multiple.css" >
</@htmlHead>


<@htmlBody 'bbs' 'topic'>

	<!-- breadcrumbs begin -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '主题管理' '新增'></@breadcrumbs>
	<!-- breadcrumbs end -->

	<!-- page-content begin -->
	<div class="page-content">
			
			<!-- page-header begin -->
			<div class="page-header">
					<h1>
						新增
					</h1>
			</div>
			<!-- page-header end -->

			<!-- 表单开始 -->
			<form class="form-horizontal" id="validation-form" method="post" action="${path}/manage/bbs/topic/create" >
				
			<!-- row begin -->
			<div class="row">	
				<div class="col-md-8 col-md-offset-2">
					
							
							<div class="form-group">	
								<label class="control-label col-md-2 no-padding-right" for="cpname">板块名称:</label>
								<div class="col-md-10">
									<div class="clearfix">
											<select id="boardid" name="board.id" style="width: 50%">
											<option value="">请选择所属板块</option>
											<#list boardList as category>
												<option value="${category.id}">${category.name}</option>
											</#list>
										</select>
									</div>
								</div>
							</div>
							
							<div class="form-group">	
								<label class="control-label col-md-2 no-padding-right" for="cpname">会员名称:</label>
								<div class="col-md-10">
									<div class="clearfix">
											<select id="memberid" name="member.id" style="width: 50%">
											<option value="">请选择会员</option>
											<#list memberShipList as item>
												<option value="${item.id}">${item.member.username} - ${item.member.nickname}</option>
											</#list>
										</select>
									</div>
								</div>
							</div>
							
							
						
							
							<!-- 价格相关 -->
							<div class="hr hr-dotted" style="border-top: 2px dotted #AAA"></div>
							
							<div class="form-group">
								<label class="control-label col-md-2 no-padding-right" for="cpname">主题名称:</label>
								<div class="col-md-10">
									<div class="clearfix">
										<input type="text" class="form-control" placeholder="请输入主题名称" name="name"   id="name" value="${topic.name}"  style="width:50%"/>
									</div>
								</div>
							</div>
								
							<!-- 商品详情富文本 --> 
						   	<div class="form-group">
								<label class="control-label col-md-2 no-padding-right" >主题内容:</label>
								<div class="col-md-10">
									<div class="clearfix">
										<textarea path="content" id="content" name="content"   style="width:100%;"></textarea>		
									</div>
								</div>
							</div>
							
							
							<!-- 上传多张图片 -->	
							<input id="uppath" type="hidden" value="${path}/upload/pic/120/120">
							<div id="invisible-list" style="display:none;"></div>
								
							<div class="form-group">  
								<label   class="col-md-2 control-label no-padding-right">主题详情图:</label>
								<div class="col-md-10">
									<ul id="visible-list" class="list-unstyled clearfix">
				               		</ul>
								 	<input id="num" style="display: none;" value="">
									<label class="ace-file-input">
									 	<table id="fields-table" class="table table-striped table-bordered table-hover">
											<tr id="tr0">
												<td style="width: 420px;">
													<input class="form-control" type="file" id="id-input-file"   name="file"  onchange="addPic(this)" >
												  	<span style="width: 400px;margin-top: 10px;margin-left: 5px;"  class="ace-file-container"  data-title="上传">
														<span  class="ace-file-name">
															<p id="filename">点击这里上传文件</p><i class=" ace-icon fa fa-upload"></i>
														</span>
													</span>
													<a class="remove" href="#"><i class=" ace-icon fa fa-times"></i></a>
												</td>
												
												<td>
													<button type="button" data="0" class="btn btn-default dropdown-toggle" onclick="createView()">确定</button>
												</td>
										   </tr>
										</table>	
									</label>
								</div>  
							</div>
					
							
					
						
							
						
					
								
							<!-- 提交开始 -->	
		                    <div class="form-group" style="margin-top: 100px;">
		                    	<div class="col-md-8 center">
			                    	<button id="form-submit" type="button" onclick="mysubmit('validation-form')"  class="btn btn-primary">
										<i class="fa fa-save align-top bigger-125"></i>保存
									</button>
								 
									<button type="reset" class="btn">
										<i class="fa fa-pencil align-top bigger-125"></i>重置
									</button>
								</div>					
	                   		</div>
							<!-- 提交结束  -->
							
						</div>		
					</div>
				</form>
				<!-- 表单结束 -->	
		
	</div>		
	<!-- page-content end -->

</@htmlBody>



<@htmlBodyScript>
	
	
	<!-- 日期控件-->
 	<link rel="stylesheet" href="${resources}/plugins/bootstrap-datetimepicker/2.3.4/css/bootstrap-datetimepicker.min.css" />
 	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.js"></script>
   	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script>
			$("#starttime,#endtime").datetimepicker({
				bootcssVer:3,
			    format: "yyyy-mm-dd",
			    language:"zh-CN",
				weekStart: 1,
	        	todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
			});
		</script>

	<!-- 富文本编辑器 -->
	<script charset="utf-8" src="${resources}/plugins/kindeditor/4.1.10/kindeditor.js"></script>
	<script charset="utf-8" src="${resources}/plugins/kindeditor/4.1.10/lang/zh_CN.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
		var editor;
	    KindEditor.ready(function(K) {
	            editor = K.create('#content', {
	                    resizeType : 1,
	                    pasteType  : 1,
	                    uploadJson : '${path}/richtext/upload/pic/0/0',
	        		    height : "350px",
	        		    items : ['source', '|',
	                 		    'undo', 'redo', '|', 
	                 		    'cut', 'copy', 'paste','|',
	        		           'justifyleft', 'justifycenter', 'justifyright','justifyfull','|',
	        		           'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',  'superscript','|',
	        		           'image', 'table', 'hr', 'link', 'unlink', '|', 
	        		           'title', 'fontname', 'fontsize', 'forecolor','hilitecolor','|',
	        		           'bold', 'italic', 'underline', 'removeformat', '|', 'about'],
	        		    afterSetData : function(id) {}
	            });
	 	});
    </script>

	

	<!-- 上传控件 -->
	<script src="${resources}/plugins/fileupload/ajaxfileupload.js"></script>
	<!-- 多张 -->
	<script src="${resources}/plugins/fileupload/upload.topic.multiple.js"></script>
	

	<!-- 验证框架 -->	
	<script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
	<script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
	
	<script type="text/javascript">
				
			jQuery.validator.addMethod("isName", function(value, element) {       
	 			var corpName =  /^[\u0391-\uFFE5\w\-\s\.]{1,50}$/;
  				 return this.optional(element) || corpName.test(value);       
 			}, "请使用汉字、英文字母、数字、下划线、减号、空格或点");   
 			
			jQuery.validator.addMethod("isPrice", function(value, element) {       
	 			var price =  /^[0-9]+(.[0-9]{0,2})?$/;
  				 return this.optional(element) || price.test(value);       
 			}, "请输入整数或至多两位小数");   
			
			$('#validation-form').validate({
				errorElement: 'div',
				errorClass: 'help-block',
				focusInvalid: false,
				rules: {
					name: {
						required:true,
						maxlength:20
					},
					content:{
						required:true
					},
					"board.id":{
						required:true,
					},
					"member.id":{
						required:true,
					}
				},
		
				messages: {
				},
		
		
				highlight: function (e) {
					$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
				},
		
				success: function (e) {
					$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
					$(e).remove();
				},
		
				errorPlacement: function (error, element) {
					if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
						var controls = element.closest('div[class*="col-"]');
						if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
						else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
					}
					else if(element.is('.select2')) {
						error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
					}
					else if(element.is('.chosen-select')) {
						error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
					}
					else error.insertAfter(element.parent());
				},
		
				invalidHandler: function (form) {
				}
			});
	</script>
	
	<script>
	    /**
	     * 功能 : 提交表单
		 */
	 	function mysubmit(form){
	 		editor.sync();
	 		$("#"+form).submit();
	 	}
      
 	</script>
</@htmlBodyScript>